<!-- 通知书 -->
<template>
	<div>
		<el-dialog
			v-model="state.dialogVisible"
			:title="noticeData.title + '通知书'"
			width="40%"
			conter
			:close="handleClose"
		>
			<el-form
				v-if="noticeData.title == '编制'"
				:model="form"
				label-width="180px"
			>
				<el-form-item label="通知书类别">
					<el-input v-model="form.noticeTypeName" disabled />
				</el-form-item>
				<el-form-item
					label="上传通知书附件"
					prop="fileName"
					:rules="{
						required: true,
						message: '请上传通知书附件',
					}"
				>
					<el-input v-model="form.fileName" disabled />
					<el-button
						@click="handelDown"
						class="btn_class button_edit"
						round
						v-if="noticeData.title == '查看'"
					>
						<svg-icon icon-class="project-detail-icon-l-xiazai" class="icon" />
						下载</el-button
					>
					<el-upload
						ref="upload"
						class="upload-demo m-l10"
						:http-request="handleUpdate"
						:show-file-list="false"
						v-if="noticeData.title == '编制'"
					>
						<template #trigger>
							<el-button class="btn_class button_edit" round>
								<svg-icon
									icon-class="project-detail-icon-l-shangchuan"
									class="icon"
								/>
								上传</el-button
							>
						</template>
					</el-upload>
				</el-form-item>

				<el-form-item
					label="是否需缴纳保证金"
					prop="depositStatus"
					:rules="{
						required: true,
						message: '请选择是否需缴纳保证金',
						trigger: 'change',
					}"
				>
					<el-select
						v-model="form.depositStatus"
						:disabled="noticeData.title == '查看'"
						placeholder=""
					>
						<el-option label="是" :value="1" />
						<el-option label="否" :value="0" />
					</el-select>
				</el-form-item>

				<el-form-item
					label="应缴纳金额"
					v-if="form.depositStatus === 1"
					prop="depositAmount"
					:rules="{
						required: true,
						message: '请输入应缴纳金额',
						trigger: 'blur',
					}"
				>
					<el-input
						v-model="form.depositAmount"
						:disabled="noticeData.title == '查看'"
					/>
				</el-form-item>
				<el-form-item
					v-if="form.depositStatus === 1"
					label="计划缴纳日期"
					prop="data"
					:rules="{
						required: true,
						message: '请选择计划缴纳时间',
						trigger: 'change',
					}"
				>
					<div class="date_picker">
						<el-date-picker
							v-model="form.data"
							@change="changg"
							:disabled="noticeData.title == '查看'"
							type="daterange"
							range-separator="-"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							size="default"
							value-format="YYYY-MM-DD"
						/>
					</div>
				</el-form-item>
			</el-form>
			<el-form v-else :model="form" label-width="180px">
				<el-form-item label="通知书类别">
					<el-input v-model="form.noticeTypeName" disabled />
				</el-form-item>
				<el-form-item label="通知书附件" prop="fileName">
					<el-input v-model="form.fileName" disabled />
					<el-button
						@click="handelDown"
						class="btn_class button_edit"
						round
						v-if="noticeData.title == '查看'"
					>
						<svg-icon icon-class="project-detail-icon-l-xiazai" class="icon" />
						下载</el-button
					>
				</el-form-item>
				<el-form-item label="保证金" prop="depositAmount">
					<el-input
						v-model="form.depositAmount"
						:disabled="noticeData.title == '查看'"
					/>
				</el-form-item>
				<el-form-item label="保证金缴纳期限" prop="data">
					<div class="date_picker">
						<el-date-picker
							v-model="form.data"
							@change="changg"
							:disabled="noticeData.title == '查看'"
							type="daterange"
							range-separator="-"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							size="default"
							value-format="YYYY-MM-DD"
						/>
					</div>
				</el-form-item>
				<el-form-item label="费用是否已缴纳" prop="isPaid">
					<el-select
						v-model="form.isPaid"
						:disabled="noticeData.title == '查看'"
						placeholder=""
					>
						<el-option label="是" :value="1" />
						<el-option label="否" :value="0" />
					</el-select>
				</el-form-item>
			</el-form>

			<template #footer>
				<span class="dialog-footer" v-if="noticeData.title == '编制'">
					<el-button class="button_cancel2" @click="state.dialogVisible = false">
						取消
					</el-button>
					<el-button
						class="button_view"
						type="primary"
						@click="submit"
					>
						提交
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import {
	ElForm,
	ElDialog,
	ElMessage,
	ElUpload,
	ElLoading,
	ElDatePicker,
	valueEquals,
} from "element-plus";
import { processApi } from "@/api/biddingProject";
import { fileControlApi } from "@/api/assets";
import { fileCallback } from "@/api/common";
const props = defineProps({
	noticeData: {
		type: Object,
		default: {},
	},
});

const state = reactive({
	dialogVisible: false,
});
const form = reactive({
	name: "",
	data: [],
});

const open = () => {
	state.dialogVisible = true;
};

const submit = () => {
	processApi.saveApplyWinNotice(form).then((res) => {
		if (res.code == 200) {
			ElMessage.success("操作成功!");
			handleClose();
		}
	});
};

// el-upload 选择文件后
const handleUpdate = (file) => {
	const loading = ElLoading.service({
		lock: true,
		text: "Loading",
		background: "rgba(0, 0, 0, 0.7)",
	});
	let uploadFile = new FormData();
	uploadFile.append("file", file.file);
	uploadFile.append("associationId", form.businessId);
	uploadFile.append("businessType ", 14);

	fileControlApi.uploadDocumentFile(uploadFile).then((res) => {
		if (res.code == 200) {
			loading.close();
			ElMessage.success("上传成功!");
			form.fileUrlKey = res.data.fileUrlKey;
			form.fileName = res.data.fileName;
			form.fileId = res.data.fileId;
			form.file = res.data;
		}
	});
};

const handelDown = () => {
	let obj = {
		fileUrlKey: form.fileUrlKey || form.file.fileUrlKey,
		fileName: form.fileName,
	};
	console.log(obj);
	fileCallback(obj);
};

const getApplyWinNoticeInfo = (tenderTaskId) => {
	processApi.getApplyWinNoticeInfo(tenderTaskId).then((res) => {
		if (res.code == 200) {
			for (let key in res.data) {
				if (res.data[key]) {
					form[key] = res.data[key];
				}
			}
			form.isPaid = res.data.isPaid;
			form.depositStatus = res.data.depositStatus;
			form.data = [form.payStartTime, form.payEndTime];
			form.fileName = form.file.fileName;

			console.log(form);
		}
	});
};
const emits = defineEmits(["config"]);

const changg = (e) => {
	if (e && e.length > 0) {
		form.payStartTime = e[0];
		form.payEndTime = e[1];
	} else {
		form.payStartTime = "";
		form.payEndTime = "";
	}
};
watch(
	() => state.dialogVisible,
	(val) => {
		if (!val && props.type == "编制") {
			emits("config");
		}
	}
);
const handleClose = () => {
	console.log("---", 2);
	state.dialogVisible = false;
	for (let key in form) {
		form[key] = null;
	}
};
defineExpose({
	open,
	getApplyWinNoticeInfo,
});
</script>

<style lang="scss" scoped>
.el-form-item {
	.el-form-item__label {
		font-weight: 500;
		font-size: 16px;
	}
	.el-form-item__content {
		.el-input {
			width: 350px;
		}
		.el-select {
			width: 350px;
		}
		.el-date-editor {
			width: 350px !important;
		}
	}
}

.btn_class {
	width: 88px;
	height: 40px;
	margin-left: 10px;
	// border: 1px solid #fc7018;
	// color: #fc7018;
	// background-color: #fff;
}

:deep(.el-date-editor) {
	height: 40px;
}
.date_picker {
	width: 350px;
}
</style>
